<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
    <style>
        .app {
            width: 500px;
            height: 500px;
            background-color: red;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="app" >
        <h1>样式绑定 总结</h1>
        <p>
            绑定样式: <br>
                1。class样式 <br>
                    写法:class="xxx”xxx可以是字符串、对象、数组。<br>
                    字符串写法适用于:类名不确定，要动态获取。<br><br>

                    对象写法适用于:要绑定多个样式，个数不确定，名宁也不确定。<br>
                    数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。<br><br>

                2.style样式<br>
                    :style="{fontSize: xxx}"其中xxx是动态值<br>
                    :style="[a,b]"其中a、b是样式对象。<br>
        </p>


        <!-- 绑定class样式，字符串写法。适用于：样式的类名不确定，需要动态绑定。 -->
        <!-- 绑定class样式，数组写法。  适用于：样式的类名不确定，样式个数也不确定，需要动态绑定。 -->
        <!-- 绑定class样式--对象写法，  适用于: 要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
        <div :class="bgColor">{{msg}}</div>
        <button @click="changeBg" > 点击改变样式 </button>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el:'#app',
        data:{
            msg:'hello world',
            bgColor:''
        },
        methods: {
            changeBg(){
                this.bgColor ="app" 
            }
        },
    })
</script>
</html>